// NOTE some CSS is duplicated here between Checkbox.scss and Radio.scss. We
// may want to set up a way to share those CSS properties at some point.

.checkbox {
  --size: var(--checkbox-size, 1em);
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  font-size: inherit;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0 var(--checkbox-margin-bottom, -0.1em) 0;
  width: var(--size);
  height: var(--size);
  appearance: none;
  border: solid var(--color-border-input) 0.15em;
  border-radius: 0.15em;
  background: var(--color-bg-input);
  position: relative;

  &:not(:disabled):not(:checked):not(:indeterminate):hover {
    background-color: var(--color-bg-input-hover);
  }
  &:not(:disabled):hover {
    background-color: var(--color-bg-filled-input-hover);
  }
  &:checked,
  &:indeterminate {
    border: 0.05em solid var(--color-border-input);
    background: var(--color-bg-filled-input);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.75em auto;
  }
  &:disabled {
    background-color: var(--color-bg-input-disabled);
    border-color: var(--color-border-input);
  }

  &:checked::before,
  &:indeterminate::before {
    --icon-size: calc(0.8 * var(--size));
    content: '';
    position: absolute;
    inset: 0;
    background-color: white;
    pointer-events: none;
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
    mask-size: var(--icon-size) var(--icon-size);
    -webkit-mask-size: var(--icon-size) var(--icon-size);
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }
  &:checked::before {
    mask-image: var(--icon-check);
    -webkit-mask-image: var(--icon-check);
  }
  &:indeterminate::before {
    mask-image: var(--icon-minus);
    -webkit-mask-image: var(--icon-minus);
  }
  &:disabled::before {
    background-color: var(--color-fg-base);
  }

  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }

  &:not(:disabled):focus {
    outline: 1px solid var(--color-border-input-focused);
  }
}
